<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户选座 - 教室上课签到系统</title>
    <script src="https://cdn.socket.io/4.5.4/socket.io.min.js" crossorigin="anonymous"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .logout-btn {
            background-color: #f44336;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
        }
        .logout-btn:hover {
            background-color: #d32f2f;
        }
        .user-info {
            text-align: right;
            color: #666;
        }
        .cinema-layout {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
        }
        .screen {
            background-color: #333;
            color: white;
            padding: 10px 200px;
            text-align: center;
            margin-bottom: 30px;
            border-radius: 4px;
        }
        .seat-row {
            display: flex;
            margin-bottom: 10px;
        }
        .row-label {
            width: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            font-weight: bold;
            color: #555;
        }
        .seat {
            width: 40px;
            height: 40px;
            margin: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            position: relative;
        }
        .seat.available {
            background-color: #4CAF50;
            color: white;
        }
        .seat.unavailable {
            background-color: #444444;
            color: white;
            cursor: not-allowed;
        }
        .seat.selected-by-user {
            background-color: #2196F3;
            color: white;
        }
        .seat.conflict {
            background-color: #FF9800;
            color: white;
        }
        .seat.single-selected {
            background-color: #2196F3;
            color: white;
        }
        .seat.multi-selected {
            background-color: #f44336;
            color: white;
        }
        .seat.user-selected-indicator {
            /* 不改变背景色，仅添加边框或其他视觉提示 */
            border: 2px solid yellow;
            box-shadow: 0 0 5px rgba(255, 255, 0, 0.5);
        }
        .seat:hover:not(.unavailable) {
            opacity: 0.8;
            transform: scale(1.1);
        }
        .legend {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 30px;
        }
        .legend-item {
            display: flex;
            align-items: center;
            margin: 0 15px 10px 15px;
        }
        .legend-color {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            margin-right: 5px;
        }
        .tooltip {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: 10px;
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: pre-line;
            width: 200px;
            max-width: 250px;
            z-index: 1000;
            pointer-events: none;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s, visibility 0.2s;
        }
        .tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
        }
        .selection-info {
            margin-top: 20px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 4px;
            text-align: center;
        }
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px;
            background-color: #4CAF50;
            color: white;
            border-radius: 4px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            z-index: 100;
            animation: slideIn 0.3s ease-out;
        }
        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>教室上课签到系统</h1><h1><font color="blue">欢迎，{{ current_user.nick }}</font></h1>
            <div>
                <a href="{{ url_for('logout') }}" class="logout-btn">退出登录</a>
            </div>
        </div>
        
        <div class="selection-info">
            <h3>选座说明</h3>
            <p>点击可用座位进行选择，再次点击取消选择。绿色表示可选座位，红色表示多人选择的座位。</p>
        </div>
        
        <div class="cinema-layout">
            <div class="screen">屏幕</div>
            <div id="seats-container">
                {% for row in range(1, layout.row_count + 1) %}
                <div class="seat-row">
                    <div class="row-label">第{{ row }}排</div>
                    {% for seat in seat_data %}
                    {% if seat.row == row %}
                    <div class="seat {% if not seat.is_available %}unavailable{% elif seat.selection_count > 1 %}multi-selected{% elif seat.user_selected %}selected-by-user{% elif seat.selection_count == 1 %}single-selected{% else %}available{% endif %}"
                         data-seat-id="{{ seat.id }}"
                         data-row="{{ seat.row }}"
                         data-number="{{ seat.number }}">
                        {% if seat.selection_count > 0 %}
                            {% for user in seat.user_list %}
                                {% if loop.first %}
                                    {{ user.nick if user.nick else user.username }}
                                {% endif %}
                            {% endfor %}
                        {% else %}
                            {{ seat.number }}
                        {% endif %}
                        {% if seat.selection_count > 0 %}
                        <div class="tooltip">
                            已有 {{ seat.selection_count }} 人选择此座位
                            {% if seat.user_list and seat.user_list|length > 0 %}           
选择人员：
{% for user in seat.user_list %}
{{ loop.index }}. {{ user.username }} ({{ user.nick }})
{% endfor %}
{% endif %}
</div>
                        {% endif %}
                    </div>
                    {% endif %}
                    {% endfor %}
                </div>
                {% endfor %}
            </div>
            
            <div class="legend">
                <div class="legend-item">
                    <div class="legend-color available"></div>
                    <span>可选座位</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color selected-by-user"></div>
                    <span>您已选择的座位</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color single-selected"></div>
                    <span>1人选择的座位</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color multi-selected"></div>
                    <span>2人及以上选择的座位</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color unavailable"></div>
                    <span>不可选座位</span>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 添加Socket.io连接状态监控
        console.log('正在初始化Socket.io连接...');
        
        // 初始化Socket.io，连接到正确的端口
        const socket = io(window.location.origin);
        
        // 连接成功
        socket.on('connect', () => {
            console.log('Socket.io连接成功，ID:', socket.id);
            showNotification('实时通信已连接');
        });
        
        // 连接断开
        socket.on('disconnect', () => {
            console.log('Socket.io连接已断开');
            showNotification('实时通信已断开，请刷新页面', true);
        });
        
        // 连接错误
        socket.on('connect_error', (error) => {
            console.error('Socket.io连接错误:', error);
            showNotification('实时通信连接失败，请刷新页面', true);
        });
        
        // 显示通知函数
        function showNotification(message, isError = false) {
            const notification = document.createElement('div');
            notification.classList.add('notification');
            if (isError) {
                notification.style.backgroundColor = '#f44336';
            }
            notification.textContent = message;
            document.body.appendChild(notification);
            
            // 3秒后移除通知
            setTimeout(() => {
                notification.style.opacity = '0';
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 300);
            }, 3000);
        }
        
        // 检查DOM加载状态
        console.log('文档加载状态:', document.readyState);
        
        // 等待DOM加载完成后再绑定事件
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM已加载完成，开始绑定座位点击事件...');
            
            // 添加全局测试按钮，用于验证alert功能
            const testButton = document.createElement('button');
            testButton.textContent = '测试alert';
            testButton.style.position = 'fixed';
            testButton.style.top = '10px';
            testButton.style.right = '10px';
            testButton.style.zIndex = '9999';
            testButton.addEventListener('click', function() {
                console.log('测试按钮被点击');
                alert('测试alert功能正常工作！');
            });
            document.body.appendChild(testButton);
            
            // 存储当前用户已选择的座位ID（单座限制）
            let currentSelectedSeatId = null;
            
            // 初始化：检查用户是否已经选择了座位
            const currentUsername = '{{ current_user.username }}';
            
            // 首先检查所有带tooltip的座位，查找当前用户是否在任何座位的用户列表中
            const seatsWithTooltip = document.querySelectorAll('.seat .tooltip');
            let foundSelectedSeat = false;
            
            seatsWithTooltip.forEach(tooltip => {
                const seat = tooltip.parentElement;
                const tooltipText = tooltip.textContent;
                
                // 检查tooltip文本中是否包含当前用户名
                if (tooltipText.includes(currentUsername)) {
                    console.log(`发现用户已选择的座位（通过tooltip检测）: ID=${seat.getAttribute('data-seat-id')}`);
                    
                    // 如果用户还没有保存选择的座位ID，保存这个座位ID
                    if (!foundSelectedSeat) {
                        currentSelectedSeatId = seat.getAttribute('data-seat-id');
                        foundSelectedSeat = true;
                        console.log('初始化：用户已选择座位ID:', currentSelectedSeatId);
                    } else {
                        // 如果用户选择了多个座位，自动取消其他座位的选择
                        const extraSeatId = seat.getAttribute('data-seat-id');
                        console.log('检测到多个选择，自动取消座位:', extraSeatId);
                        
                        // 更新UI状态
                        if (seat.classList.contains('multi-selected')) {
                            // 多人选择的座位，移除用户选择标识
                            seat.classList.remove('user-selected-indicator');
                        } else {
                            // 只有当前用户选择的座位，变为可选状态
                            seat.classList.remove('selected-by-user', 'single-selected');
                            seat.classList.add('available');
                        }
                        
                        // 更新tooltip内容，移除当前用户
                        const updatedTooltipText = tooltipText.split('\n').filter(line => !line.includes(currentUsername)).join('\n');
                        tooltip.textContent = updatedTooltipText;
                        
                        // 发送取消选择事件
                        socket.emit('deselect_seat', { 
                            seat_id: extraSeatId 
                        });
                    }
                }
            });
            
            // 然后再检查标准的selected-by-user类（确保兼容性）
            const userSelectedSeats = document.querySelectorAll('.seat.selected-by-user');
            if (userSelectedSeats.length > 0) {
                if (!foundSelectedSeat) {
                    // 如果之前没找到，使用selected-by-user类的座位
                    currentSelectedSeatId = userSelectedSeats[0].getAttribute('data-seat-id');
                    foundSelectedSeat = true;
                    console.log('初始化：通过selected-by-user类检测到用户已选择座位ID:', currentSelectedSeatId);
                }
                
                // 如果用户选择了多个座位（可能是系统错误），自动取消其他座位的选择
                if (userSelectedSeats.length > 1) {
                    for (let i = (foundSelectedSeat && userSelectedSeats[0].getAttribute('data-seat-id') === currentSelectedSeatId) ? 1 : 0; i < userSelectedSeats.length; i++) {
                        const extraSeatId = userSelectedSeats[i].getAttribute('data-seat-id');
                        // 跳过已经作为当前选择的座位
                        if (extraSeatId === currentSelectedSeatId) continue;
                        
                        console.log('检测到多个selected-by-user类，自动取消座位:', extraSeatId);
                        
                        // 更新UI状态
                        userSelectedSeats[i].classList.remove('selected-by-user');
                        userSelectedSeats[i].classList.add('available');
                        
                        // 发送取消选择事件
                        socket.emit('deselect_seat', { 
                            seat_id: extraSeatId 
                        });
                    }
                }
            }
            
            // 如果发现用户选择了多个座位，显示通知
            if ((userSelectedSeats.length > 1 || (seatsWithTooltip.length > 0 && foundSelectedSeat)) && userSelectedSeats.length + seatsWithTooltip.length > 2) {
                showNotification('系统已自动为您保留一个座位选择');
            }
            
            // 处理座位点击
            const seats = document.querySelectorAll('.seat:not(.unavailable)');
            console.log(`找到 ${seats.length} 个可选座位`);
            
            // 显示所有可选座位的信息
            seats.forEach(seat => {
                const seatId = seat.getAttribute('data-seat-id');
                console.log(`座位信息: ID=${seatId}, 类名=${seat.className}`);
            });
            
            seats.forEach(seat => {
                // 添加调试信息，显示座位ID和当前状态
                const seatId = seat.getAttribute('data-seat-id');
                console.log(`为座位 ${seatId} 绑定点击事件`);
                
                // 确保座位可点击
                seat.style.cursor = 'pointer';
                seat.style.userSelect = 'none';
                
                // 鼠标悬停显示tooltip
                seat.addEventListener('mouseenter', () => {
                    const tooltip = seat.querySelector('.tooltip');
                    if (tooltip) {
                        tooltip.style.opacity = '1';
                        tooltip.style.visibility = 'visible';
                    }
                });
                
                // 鼠标离开隐藏tooltip
                seat.addEventListener('mouseleave', () => {
                    const tooltip = seat.querySelector('.tooltip');
                    if (tooltip) {
                        tooltip.style.opacity = '0';
                        tooltip.style.visibility = 'hidden';
                    }
                });
                
                seat.addEventListener('click', function(e) {
                    console.log('捕获到座位点击事件');
                    e.preventDefault();
                    e.stopPropagation();
                    
                    const seatId = this.getAttribute('data-seat-id');
                    const isSelected = this.classList.contains('selected-by-user');
                    const isMultiSelected = this.classList.contains('multi-selected');
                    const row = this.getAttribute('data-row');
                    const number = this.getAttribute('data-number');
                    const tooltip = this.querySelector('.tooltip');
                    const tooltipText = tooltip ? tooltip.textContent : '无';
                    
                    console.log(`点击座位: ID=${seatId}, 排=${row}, 号=${number}, 当前已选=${isSelected}, 多人选择=${isMultiSelected}`);
                    
                    if (isSelected) {
                        // 取消选择当前座位
                        console.log('取消选择座位:', seatId);
                        
                        // 先更新本地UI状态
                        this.classList.remove('selected-by-user');
                        this.classList.add('available');
                        
                        // 发送取消选择事件
                        socket.emit('deselect_seat', { 
                            seat_id: seatId 
                        });
                        showNotification('已取消选择座位');
                        
                        // 重置当前选择的座位ID
                        currentSelectedSeatId = null;
                    } else {
                        // 单座选择限制：如果已经选择了其他座位，显示确认对话框
                        if (currentSelectedSeatId && currentSelectedSeatId !== seatId) {
                            // 找到之前选择的座位元素
                            const previousSeat = document.querySelector(`.seat[data-seat-id="${currentSelectedSeatId}"]`);
                            
                            // 检查previousSeat是否存在，并且座位上是否仍有当前用户的选择标记
                            if (previousSeat && previousSeat.classList.contains('selected-by-user')) {
                                // 获取之前座位的行列信息
                                const previousRow = previousSeat.dataset.row;
                                const previousNumber = previousSeat.dataset.number;
                                
                                // 获取原座位的tooltip内容，提取剩余选座人信息
                                const previousTooltip = previousSeat.querySelector('.tooltip');
                                let remainingUsersInfo = '';
                                
                                if (previousTooltip && previousTooltip.textContent) {
                                    // 解析tooltip内容，提取选座人信息
                                    const previousTooltipText = previousTooltip.textContent;
                                    
                                    // 查找包含选座人列表的部分
                                    const userListStart = previousTooltipText.indexOf('选择人员：');
                                    if (userListStart !== -1) {
                                        // 提取选座人列表（排除当前用户）
                                        const userListText = previousTooltipText.substring(userListStart);
                                        const users = userListText.split('\n').filter(line => 
                                            line && line.trim() !== '' && !line.includes('选择人员：') && !line.includes(currentUsername)
                                        );
                                        
                                        if (users.length > 0) {
                                            remainingUsersInfo = '\n\n该座位当前还有以下人员选择：';
                                            users.forEach((user, index) => {
                                                remainingUsersInfo += '\n' + user;
                                            });
                                            
                                            // 如果只有1人选择，更新座位颜色为蓝色（单人选择状态）并更新tooltip信息
                                            if (users.length === 1) {
                                                // 更新座位颜色为蓝色（单人选择状态）
                                                previousSeat.classList.remove('multi-selected');
                                                previousSeat.classList.add('single-selected');
                                                
                                                // 更新tooltip信息
                                                if (previousTooltip) {
                                                    // 构建新的tooltip内容，显示剩余1人选择
                                                    let newTooltipContent = '已有 1 人选择此座位';
                                                    newTooltipContent += '\n选择人员：';
                                                    newTooltipContent += '\n' + users[0];
                                                    previousTooltip.textContent = newTooltipContent;
                                                }
                                            }
                                        } else {
                                            remainingUsersInfo = '\n\n该座位将变为可选状态。';
                                            // previousSeat座位显示座位号
                                            previousSeat.textContent = previousNumber;
                                        }
                                    }
                                }
                                
                                // 弹窗提示用户是否改选，包含剩余选座人信息
                                let currentUsersInfo = '';                        
                                // 查找包含选座人列表的部分
                                const currentUserListStart = tooltipText.indexOf('选择人员：');
                                if (currentUserListStart !== -1) {
                                    // 提取选座人列表（排除当前用户）
                                    const userListText = tooltipText.substring(currentUserListStart);
                                    const users = userListText.split('\n').filter(line => 
                                        line && line.trim() !== '' && !line.includes('选择人员：') && !line.includes(currentUsername)
                                    );
                                    if (users.length > 0) {
                                        currentUsersInfo = '\n\n该座位当前还有以下人员选择：';
                                        users.forEach((user, index) => {
                                            currentUsersInfo += '\n' + user;
                                        });
                                    } else {
                                        currentUsersInfo = '\n\n该座位将变为可选状态。';
                                        // previousSeat座位显示座位号
                                        previousSeat.textContent = previousNumber;
                                    }
                                }

                                if (confirm(`您已选择第${previousRow}排${previousNumber}号座位，确定要改选为第${row}排${number}号座位吗？${currentUsersInfo}`)) {
                                    console.log('用户确认改选座位，先取消之前的选择:', currentSelectedSeatId);
                                    
                                    // 更新之前座位的UI状态
                                    previousSeat.classList.remove('selected-by-user', 'user-selected-indicator');
                                    
                                    // 确定座位新状态
                                    if (previousSeat.classList.contains('multi-selected') || previousSeat.classList.contains('single-selected')) {
                                        // 多人或单人选择的座位，保持现有选择状态但移除用户选择标记
                                        // 不需要添加available类，因为还有其他人选择
                                    } else {
                                        // 只有当前用户选择的座位，变为可选状态
                                        previousSeat.classList.remove('single-selected');
                                        previousSeat.classList.add('available');
                                    }
                                    
                                    // 发送取消选择事件
                                    socket.emit('deselect_seat', { 
                                        seat_id: currentSelectedSeatId 
                                    });
                                    showNotification('已取消之前选择的座位');
                                } else {
                                    // 用户取消改选
                                    console.log('用户取消改选座位');
                                    return; // 终止函数执行，不选择新座位
                                }
                            }
                        }
                        
                        // 选择新座位
                        console.log('选择座位:', seatId);
                        
                        // 更新本地UI状态
                        // 移除可能存在的状态类
                        this.classList.remove('available', 'single-selected', 'multi-selected');
                        
                        // 添加用户选择标记
                        this.classList.add('selected-by-user');
                        
                        // 如果是多人选择的座位，确保样式正确
                        if (isMultiSelected) {
                            this.classList.add('multi-selected');
                            this.classList.remove('selected-by-user');
                            this.classList.add('user-selected-indicator');
                        } else {
                            this.classList.add('selected-by-user');
                        }
                        
                        // 发送选择事件
                        socket.emit('select_seat', { 
                            seat_id: seatId 
                        });
                        showNotification(`已选择第${row}排${number}号座位`);
                        
                        // 更新当前选择的座位ID
                        currentSelectedSeatId = seatId;
                    }
                });
            });
        });
        
        // 获取当前用户名（作为全局变量）
        const currentUsername = '{{ current_user.username }}';
        
        // 监听座位选择更新
        socket.on('seat_selected', data => {
            const seat = document.querySelector(`.seat[data-seat-id="${data.seat_id}"]`);
            if (seat) {
                // 检查是否是当前用户选择的
                const isCurrentUser = data.username === currentUsername;
                
                // 单座限制：如果当前用户选择了新座位，更新currentSelectedSeatId
                if (isCurrentUser) {
                    console.log(`当前用户选择了座位 ${data.seat_id}，更新当前选择的座位ID`);
                    currentSelectedSeatId = data.seat_id;
                }
                
                // 更新选座人数显示和用户列表
                let tooltip = seat.querySelector('.tooltip');
                if (!tooltip) {
                    tooltip = document.createElement('div');
                    tooltip.classList.add('tooltip');
                    seat.appendChild(tooltip);
                }
                
                // 更新座位上显示的用户昵称
                if (data.user_list && data.user_list.length > 0) {
                    // 获取第一个用户的昵称或用户名
                    const displayName = data.user_list[0].nick || data.user_list[0].username;
                    // 清空座位内容，但保留tooltip
                    while (seat.firstChild) {
                        if (seat.firstChild === tooltip) {
                            break;
                        }
                        seat.removeChild(seat.firstChild);
                    }
                    // 添加昵称文本节点
                    const nameNode = document.createTextNode(displayName);
                    seat.insertBefore(nameNode, tooltip);
                } else {
                    // 如果没有用户选择，显示座位号
                    const seatNumber = seat.getAttribute('data-number');
                    // 清空座位内容，但保留tooltip
                    while (seat.firstChild) {
                        if (seat.firstChild === tooltip) {
                            break;
                        }
                        seat.removeChild(seat.firstChild);
                    }
                    // 添加座位号文本节点
                    const numberNode = document.createTextNode(seatNumber);
                    seat.insertBefore(numberNode, tooltip);
                }
                
                // 设置tooltip内容，包含人数和用户列表
                let tooltipContent = `已有 ${data.selection_count} 人选择此座位`;
                if (data.user_list && data.user_list.length > 0) {
                    tooltipContent += '\n选择人员：';
                    data.user_list.forEach((user, index) => {
                        tooltipContent += `\n${index + 1}. ${user.username} (${user.nick})`;
                    });
                }
                tooltip.textContent = tooltipContent;
                
                // 更新座位状态
                if (data.selection_count > 0) {
                    // 保存当前用户选择状态
                    const wasSelectedByUser = seat.classList.contains('selected-by-user') || 
                                            (data.user_list && data.user_list.some(user => user.username === currentUsername));
                    
                    // 移除所有状态类
                    seat.classList.remove('available', 'single-selected', 'multi-selected', 'selected-by-user', 'user-selected-indicator');
                    
                    // 根据选座人数设置相应的类
                    if (data.selection_count > 1) {
                        // 如果有多人选择，显示为多人选择的颜色（红色）
                        seat.classList.add('multi-selected');
                    } else if (data.selection_count === 1) {
                        // 只有一人选择
                        if (!wasSelectedByUser) {
                            // 只有一人选择且不是当前用户，显示为单人选择的颜色（蓝色）
                            seat.classList.add('single-selected');
                        } else if (isCurrentUser) {
                            // 当前用户选择的座位，显示为用户选择的样式
                            seat.classList.add('selected-by-user');
                        }
                    }
                    
                    // 最后添加当前用户选择状态，如果需要
                    if (wasSelectedByUser && data.selection_count > 0) {
                        // 如果当前用户已选择，添加标识性class但不影响多人选择的颜色显示
                        if (data.selection_count > 1) {
                            // 多人选择，确保多人选择的样式优先级更高
                            seat.classList.add('user-selected-indicator');
                        } else if (!seat.classList.contains('selected-by-user')) {
                            seat.classList.add('selected-by-user');
                        }
                    }
                } else {
                    seat.classList.add('available');
                    seat.classList.remove('single-selected', 'multi-selected', 'selected-by-user', 'user-selected-indicator');
                }
            }
        });
        
        // 监听座位取消选择更新
        socket.on('seat_deselected', data => {
            const seat = document.querySelector(`.seat[data-seat-id="${data.seat_id}"]`);
            if (seat) {
                // 检查是否是当前用户取消选择的
                const isCurrentUser = data.username === currentUsername;
                
                // 检查是否是管理员清空了数据（管理员的username不是当前用户，并且选座人数变为0）
                const isAdminClearing = data.username !== currentUsername && data.selection_count === 0;
                
                // 如果是管理员清空数据，重置当前用户的选座状态
                if (isAdminClearing) {
                    currentSelectedSeatId = null;
                    console.log('管理员清空数据，重置当前用户选座状态');
                }
                
                if (isCurrentUser) {
                    console.log(`当前用户取消选择座位 ${data.seat_id}`);
                    
                    // 如果当前取消选择的是用户当前选中的座位，重置currentSelectedSeatId
                    if (currentSelectedSeatId === data.seat_id) {
                        currentSelectedSeatId = null;
                    }
                }
                
                // 更新选座人数显示和状态
                if (data.selection_count === 0) {
                    // 如果没有人选了，移除tooltip并设置为可用状态
                    const tooltip = seat.querySelector('.tooltip');
                    if (tooltip) {
                        seat.removeChild(tooltip);
                    }
                    // 移除所有状态类，设置为可用状态
                    seat.classList.remove('multi-selected', 'single-selected', 'selected-by-user', 'user-selected-indicator');
                    seat.classList.add('available');
                    
                    // 更新座位显示为座位号
                    const seatNumber = seat.getAttribute('data-number');
                    // 清空座位内容
                    while (seat.firstChild) {
                        seat.removeChild(seat.firstChild);
                    }
                    // 添加座位号文本节点
                    const numberNode = document.createTextNode(seatNumber);
                    seat.appendChild(numberNode);
                } else {
                    // 至少有一人选择
                    let tooltip = seat.querySelector('.tooltip');
                    if (!tooltip) {
                        // 如果没有tooltip，创建一个
                        tooltip = document.createElement('div');
                        tooltip.className = 'tooltip';
                        seat.appendChild(tooltip);
                    }
                    
                    // 确保用户列表存在且不为空
                    const userList = data.user_list || [];
                    
                    // 设置tooltip内容，包含人数和用户列表
                    let tooltipContent = `已有 ${data.selection_count} 人选择此座位`;
                    if (userList.length > 0) {
                        tooltipContent += '\n选择人员：';
                        userList.forEach((user, index) => {
                            const displayName = user.nick || user.username;
                            tooltipContent += `\n${index + 1}. ${displayName} (${user.nick})`;
                        });
                    }
                    tooltip.textContent = tooltipContent;
                    
                    // 更新座位上显示的用户昵称
                    if (userList.length > 0) {
                        // 获取第一个用户的昵称或用户名
                        const displayName = userList[0].nick || userList[0].username;
                        // 清空座位内容，但保留tooltip
                        while (seat.firstChild) {
                            if (seat.firstChild === tooltip) {
                                break;
                            }
                            seat.removeChild(seat.firstChild);
                        }
                        // 添加昵称文本节点
                        const nameNode = document.createTextNode(displayName);
                        seat.insertBefore(nameNode, tooltip);
                    } else {
                        // 如果没有用户选择，显示座位号
                        const seatNumber = seat.getAttribute('data-number');
                        // 清空座位内容，但保留tooltip
                        while (seat.firstChild) {
                            if (seat.firstChild === tooltip) {
                                break;
                            }
                            seat.removeChild(seat.firstChild);
                        }
                        // 添加座位号文本节点
                        const numberNode = document.createTextNode(seatNumber);
                        seat.insertBefore(numberNode, tooltip);
                    }
                    
                    // 移除所有状态类，重新设置
                    seat.classList.remove('available', 'single-selected', 'multi-selected', 'selected-by-user', 'user-selected-indicator');
                    
                    // 检查当前用户是否选择了此座位
                    const isCurrentUserSelected = userList.some(user => user.username === currentUsername);
                    
                    // 根据选座人数和用户状态更新座位样式
                    if (data.selection_count > 1) {
                        // 多人选择，显示为红色
                        seat.classList.add('multi-selected');
                        // 如果当前用户是其中之一，添加特殊标识
                        if (isCurrentUserSelected) {
                            seat.classList.add('user-selected-indicator');
                        }
                    } else if (data.selection_count === 1) {
                        // 单人选择，显示为蓝色
                        seat.classList.add('single-selected');
                        // 如果当前用户就是选择者，添加用户选择标识
                        if (isCurrentUserSelected) {
                            seat.classList.add('selected-by-user');
                        }
                    }
                }
            }
        });
        
        // 监听座位状态更新
        socket.on('seat_status_updated', data => {
            const seat = document.querySelector(`.seat[data-seat-id="${data.seat_id}"]`);
            if (seat) {
                if (data.is_available) {
                    seat.classList.remove('unavailable');
                    // 检查是否有用户选择了这个座位
                    const tooltip = seat.querySelector('.tooltip');
                    if (tooltip) {
                        const selectionCount = parseInt(tooltip.textContent.match(/\d+/)[0]);
                        if (selectionCount > 0) {
                            // 先根据选座人数设置基础样式
                            seat.classList.remove('available', 'single-selected', 'multi-selected', 'selected-by-user', 'user-selected-indicator');
                            
                            if (selectionCount > 1) {
                                // 多人选择，显示为红色
                                seat.classList.add('multi-selected');
                            } else {
                                // 单人选择
                                const isUserSelected = seat.classList.contains('selected-by-user');
                                if (isUserSelected) {
                                    seat.classList.add('selected-by-user');
                                } else {
                                    seat.classList.add('single-selected');
                                }
                            }
                        } else {
                            seat.classList.add('available');
                        }
                    } else {
                        seat.classList.add('available');
                    }
                } else {
                    seat.classList.add('unavailable');
                    seat.classList.remove('available', 'selected-by-user', 'multi-selected');
                }
            }
        });
        
        // 监听布局更新
        socket.on('layout_updated', data => {
            // 刷新页面以显示新布局
            location.reload();
        });
    </script>
</body>
</html>